*{
    padding: 0;
    margin: 0;
}
.header{
    width: 100%;
    height: 124px;
    .headerbg{
        width: 1180px;
        height: 124px;
        align-items: center;
        display: flex;
        margin: 0 auto;
    }
}
.nav{
    height: 50px;
    width: 100%;
    background: #ff9ab4;
}
.main{
    width: 1180px;
    margin: 0 auto 60px;
    overflow: hidden;
    margin-top: 25px;
    font-family: -apple-system, BlinkMacSystemFont, Hiragino Sans GB, STHeiti, 微软雅黑, Microsoft YaHei, SimHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    display: flex;
    .leftnav{
        margin-top: 7px;
        width: 254px;
        background: #f7f7fa;
        padding-bottom: 26px;
        box-sizing: border-box;
        .top{
            background-size: 22px;
            background-repeat: no-repeat;
            background-position: 31px 19px;
            background: #ff9ab4;
            color: #fff;
            line-height: 54px;
            font-size: 18px;
            text-align: center;
        }
        .dt{
            list-style: none;
            .dd{
                display: block;
                color: #3c3c48;
                text-align: center;
                line-height: 54px;
                font-size: 16px;
                &:hover {
                    color: #ff9ab4;
                    cursor: pointer;
                }
            }
        }
    } 
    .rightcont{
        position: relative;
        width: 898px;
        height: auto;
        .content{
            width: 880px;
            .ranklist{
                width: 879px;
                padding: 0;
                margin-top: 7px;
                margin-left: 20px;
                background: #fff;
                list-style: none;
                .rankitem{
                    margin-bottom: 26px;
                    overflow: hidden;
                    display: flex;
                    .leftimg{
                        width: 142px;
                        height: 190px;
                        display: block;
                        box-shadow: 0 0 6px #999;
                        position: relative;
                        
                        img{
                            width: 100%;
                            height: 100%;
                            opacity: 1;
                            transition: all .3s ease-out;
                            &:hover {
                                transform: scale(1.05);
                            }
                        }
                        
                    }
                    .rightrank{
                        margin-left: 20px;
                        width: 716px;
                        padding: 14px 0;
                        .alltop{
                            &:hover {
                                cursor: pointer;
                            }
                            .title{
                                display: flex;
                                justify-content: space-between;
                                h4{
                                    color: #3c3c48;
                                    font-size: 18px;
                                    em{
                                        font-size: 12px;
                                        color: #7cb9ff;
                                        font-style: normal;
                                        margin-left: 6px;
                                    }
                                }
                                .titleright{
                                    color: #7cb9ff;
                                    font-weight: 700;
                                    b{
                                        font-size: 20px;
                                        margin-right: 4px;
                                        font-weight: 500;
                                    }
                                }
                            }
                            .author{
                                margin: 8px 0;
                                color: #757580;
                                .cover{
                                    display: inline-block;
                                    width: 14px;
                                    height: 14px;
                                    position: relative;
                                    top: 2px;
                                    background: url(https://c.hotread.com/girlPc/assets/images/cover.png);
                                    background-size: cover;
                                    margin-right: 4px
                                }
                                span{
                                    color: #757580;
                                }
                            }
                            p{
                                font-size: 14px;
                                color: #757580;
                                line-height: 22px;
                                min-height: 60px;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3;
                                overflow: hidden;
                                margin-top: 14px;
                                margin-bottom: 14px;
                            }
                        }
                        .tag{
                            margin-top: 16px;
                            span{
                                border: 1px solid #e1e1e1;
                                display: inline-block;
                                padding: 0 8px;
                                font-style: normal;
                                border-radius: 4px;
                                cursor: pointer;
                                margin-right: 6px;
                                color: #666;
                                font-size: 14px;
                                box-sizing: border-box;
                                &:hover {
                                    cursor: pointer;
                                    color: #e66586;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.change{
    background-color: #e8e8eb;
}
.num{
    background: url(https://c.hotread.com/girlPc/assets/images/1.png) no-repeat;
    display: block;
    position: absolute;
    left: 10px;
    top: 0;
    width: 24px;
    height: 35px;
}
.num2{
    background: url(https://c.hotread.com/girlPc/assets/images/2.png) no-repeat;
    display: block;
    position: absolute;
    left: 10px;
    top: 0;
    width: 24px;
    height: 35px;
}
.num3{
    background: url(https://c.hotread.com/girlPc/assets/images/3.png) no-repeat;
    display: block;
    position: absolute;
    left: 10px;
    top: 0;
    width: 24px;
    height: 35px;
}
// .whel{
//     width: 540px;
//     margin-left: 64px;
//     display: block;
//     .wlist{
//         list-style: none;
//         border: 1px solid #e1e1e1;
//         padding: 0 15px 15px;
//         box-sizing: border-box;
//         .ltitle{
//             height: 52px;
//             line-height: 52px;
//             font-size: 16px;
//             color: #3c3c48;
//             .span1{
//                 font-weight: 600;
//                 position: relative;
//                 width: 63px;
//                 margin-right: 30px;
//                 text-align: center;
//                 float: left;
//                 height: 100%;
//             }
//             .span2{
//                 font-weight: 600;
//                 width: 98px;
//                 float: left;
//                 height: 100%;
//             }
//             .span3{
//                 font-weight: 600;
//                 width: 211px;
//                 float: left;
//                 height: 100%;
//             }
//             .span4{
//                 font-weight: 600;
//                 width: 104px;
//                 float: left;
//                 height: 100%;
//             }
//         }
//         .girhover{
//             background: #f8f7f7;
//             height: 48px;
//             line-height: 48px;
//             font-size: 13px;
//             .spanl1{
//                 position: relative;
//                 width: 63px;
//                 margin-right: 30px;
//                 text-align: center;
//                 float: left;
//                 height: 100%;
//                 .champion{
//                     background: url(https://c.hotread.com/girlPc/assets/images/th-champion.png);
//                         position: absolute;
//                         right: 4px;
//                         top: 16px;
//                         width: 16px;
//                         height: 13px;
//                 }
//             }
//             .spanl2{
//                 width: 98px;
//                 float: left;
//                 height: 100%;
//                 img{
//                     width: 30px;
//                     height: 30px;
//                     border-radius: 50%;
//                     margin-top: 10px;
//                 }
//             }
//             .spanl3{
//                 width: 211px;
//                 float: left;
//                 height: 100%;
//             }
//             .spanl4{
//                 width: 104px;
//                 float: left;
//                 height: 100%;
//             }
//         }
//         .girhover2{
//             height: 48px;
//             line-height: 48px;
//             font-size: 13px;
//             .spanl1{
//                 position: relative;
//                 width: 63px;
//                 margin-right: 30px;
//                 text-align: center;
//                 float: left;
//                 height: 100%;
//                 .champion{
//                     background: url(https://c.hotread.com/girlPc/assets/images/th-runner-up.png);
//                         position: absolute;
//                         right: 4px;
//                         top: 16px;
//                         width: 16px;
//                         height: 13px;
//                 }
//             }
//             .spanl2{
//                 width: 98px;
//                 float: left;
//                 height: 100%;
//                 img{
//                     width: 30px;
//                     height: 30px;
//                     border-radius: 50%;
//                     margin-top: 10px;
//                 }
//             }
//             .spanl3{
//                 width: 211px;
//                 float: left;
//                 height: 100%;
//             }
//             .spanl4{
//                 width: 104px;
//                 float: left;
//                 height: 100%;
//             }
//         }
//         .girhover3{
//             background: #f8f7f7;
//             height: 48px;
//             line-height: 48px;
//             font-size: 13px;
//             .spanl1{
//                 position: relative;
//                 width: 63px;
//                 margin-right: 30px;
//                 text-align: center;
//                 float: left;
//                 height: 100%;
//                 .champion{
//                     background: url(https://c.hotread.com/girlPc/assets/images/th-third.png);
//                         position: absolute;
//                         right: 4px;
//                         top: 16px;
//                         width: 16px;
//                         height: 13px;
//                 }
//             }
//             .spanl2{
//                 width: 98px;
//                 float: left;
//                 height: 100%;
//                 img{
//                     width: 30px;
//                     height: 30px;
//                     border-radius: 50%;
//                     margin-top: 10px;
//                 }
//             }
//             .spanl3{
//                 width: 211px;
//                 float: left;
//                 height: 100%;
//             }
//             .spanl4{
//                 width: 104px;
//                 float: left;
//                 height: 100%;
//             }
//         }
//     }
// }